import { Modal, Space, Form, Input, Divider, Select, DatePicker, Checkbox, Radio } from 'antd'
import { useEffect } from 'react'
import '../component/component.scss'
import { useStore } from '../store'

const { Option } = Select
//弹窗
const CollectionCreateTest = ({ open, onCreate, onCancel, selectQuestion }) => {

  const { subjectStore } = useStore()
  useEffect(() => {
    subjectStore.getSubjectList()
  }, [subjectStore])

  const [form] = Form.useForm()
  return (
    <Modal
      open={open}
      title="创建新试卷"
      okText="Create"
      cancelText="Cancel"
      onCancel={onCancel}
      width={1000}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields()
            onCreate(values)
          })
          .catch((info) => {
            console.log('Validate Failed:', info)
          })
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}

      >
        <Form.Item >
          <Space >
            <Form.Item
              name="testName"
              label="考试名称"
              rules={[
                {
                  required: true,
                  message: 'Please input the title of collection!',
                },
              ]}
            >
              <Input style={{
                width: 120,
              }} />
            </Form.Item>
            <Form.Item name='subjectType' label='科目' initialValue={1} >
              <Select
                style={{
                  width: 120,
                }}
              >
                {subjectStore.subjectList.map((item) => (<Option value={item.id} key={item.id}>{item.course_name}</Option>))}
              </Select>
            </Form.Item>
            <Form.Item name='testTime' label='考试时长(分钟)'>
              <Input />
            </Form.Item>
          </Space>
        </Form.Item>
        <Form.Item name='description' label='考试描述'>
          <Input />
        </Form.Item>
        <Form.Item>
          <Space>
            <Form.Item name='start_time' label='考试开始时间'>

              <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />

            </Form.Item>
            <Form.Item name='end_time' label='考试结束时间'>
              <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
            </Form.Item>
          </Space>
        </Form.Item>
      </Form>
      <Divider />
      <div className='creat-test' >

        <div className='left-creat-test' >
          {selectQuestion.map((item, index) => { // eslint-disable-line
            if (item.type_name === '判断题') {
              return (
                <Space direction='vertical' key={item.id}>

                  <p className='title-creatTest' >{index + 1}.判断题({item.question.score}分)</p>
                  <p>{item.question.question_stem}
                  </p>
                  <div className='answer-creatTest'>

                    <Radio.Group value={item.question.answer}>
                      <Radio value={true}>正确</Radio>
                      <Radio value={false}>错误</Radio>

                    </Radio.Group>
                  </div>
                  <Divider />
                </Space>
              )
            }
            if (item.type_name === '填空题') {
              return (
                <Space direction='vertical' key={item.id}>

                  <p className='title-creatTest'>{index + 1}.填空题({item.question.score}分)</p>
                  <p>{item.question.question_stem}
                  </p>
                  <p className='answer-creatTest'>
                    答案:{item.question.answer}
                  </p>
                  <Divider />
                </Space>
              )
            }
            if (item.type_name === '单选题') {
              return (
                <Space direction='vertical' key={item.id}>

                  <p className='title-creatTest'>{index + 1}.单选题({item.question.score}分)</p>
                  <p>{item.question.question_stem}
                  </p>
                  <div className='answer-creatTest'>
                    <Checkbox.Group defaultValue={item.question.answer} >
                      <Space direction='vertical'>
                        {item.question.item.map((p, index) => (

                          <Checkbox value={index} key={index}>{p}</Checkbox>

                        ))}
                      </Space>
                    </Checkbox.Group>
                  </div>
                  <Divider />
                </Space>
              )
            }
            if (item.type_name === '多选题') {
              return (
                <Space direction='vertical' key={item.id}>

                  <p className='title-creatTest'>{index + 1}.多选题({item.question.score}分)</p>
                  <p>{item.question.question_stem}
                  </p>
                  <div className='answer-creatTest'>
                    <Checkbox.Group defaultValue={item.question.answer} >
                      <Space direction='vertical'>
                        {item.question.item.map((p, index) => (
                          <Checkbox value={index} key={index}>{p}</Checkbox>
                        ))}
                      </Space>
                    </Checkbox.Group>
                  </div>
                  <Divider />
                </Space>
              )
            }
            if (item.type_name === '简答题') {
              return (
                <Space direction='vertical' key={item.id}>

                  <p className='title-creatTest'>{index + 1}.简答题({item.question.score}分)</p>
                  <p>{item.question.question_stem}
                  </p>
                  <p className='answer-creatTest'>
                    {item.question.answer}
                  </p>
                  <Divider />
                </Space>
              )
            }
          })}

        </div>

      </div>
    </Modal>
  )
}
//



export default CollectionCreateTest